<template>
  <div ref="domRef"></div>
</template>
<script>
import { ref, onMounted, watch } from 'vue'
import { CountUp } from 'countup.js'
export default {
  props: {
    data: { type: Number, default: 0 }
  },
  setup (props) {
    const domRef = ref()
    onMounted(() => {
      const countUp = new CountUp(domRef.value, props.data, { })
      if (!countUp.error) {
        countUp.start()
      } else {
        console.error(countUp.error)
      }
      watch(() => props.data, (val) => {
        countUp.update(val)
      })
    })
    return {
      domRef
    }
  }
}
</script>
